<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <link th:href="@{/css/main/style.css}" rel="stylesheet" type="text/css"/>
    <meta charset="utf-8">
    <title>计算器</title>
    <script type="text/javascript">
        /*9.编写一个计算器，实现加，减，乘，除，归0，计算功能。*/
        var temp="";
        function fn(i){
            var num = document.getElementsByName("num")[i].value;
            temp+=num;
            document.getElementById("text").value=temp;
        }
        function zero(){
            document.getElementById("text").value="";
            temp="";
        }
        function calculate(){
            var oper = getOper();
            switch(oper){
                case 1:
                    var num = temp.split("+");
                    var sum = parseFloat(num[0])+parseFloat(num[1]);
                    document.getElementById("text").value=sum;
                    temp=sum;
                    break;
                case 2:
                    var num = temp.split("-");
                    var lease = parseFloat(num[0])-parseFloat(num[1])
                    document.getElementById("text").value=lease;
                    temp=lease;
                    break;
                case 3:
                    var num = temp.split("*");
                    var cheng = parseFloat(num[0])*parseFloat(num[1])
                    document.getElementById("text").value=cheng;
                    temp=cheng
                    break;
                case 4:
                    var num = temp.split("/");
                    var chu = parseFloat(num[0])/parseFloat(num[1])
                    document.getElementById("text").value=chu;
                    temp=chu;
                    break;


            }

        }
        function getOper(){
            var op=document.getElementsByClassName("op");
            for(var i=0;i<temp.length;i++){
                if(temp[i]=="+"){
                    return 1;
                }else if(temp[i]=="-"){
                    return 2;
                }else if(temp[i]=="*"){
                    return 3;
                }else if(temp[i]=="/"){
                    return 4;
                }
            }
        }

    </script>
    <style type="text/css">
        td{ text-align:center;}
        table{ background: #F45B4B;}

    </style>
</head>

<body>
<table width="600" border="1" align="center" height="400">
    <tr>
        <td colspan="3">
            <input type="text" style=" width:100px; text-align:right;" id="text"/>
        </td>
        <td>
            <input type="button" value="C" id="zero" onClick="zero()"/>
        </td>

    </tr>
    <tr>
        <td><input type="button" value="7" name="num" onClick="fn(0)"/></td>
        <td><input type="button" value="8" name="num" onClick="fn(1)"/></td>
        <td><input type="button" value="9"  name="num" onClick="fn(2)"/></td>
        <td><input type="button" value="+" name="num" class="op" onClick="fn(3)"/></td>
    </tr>
    <tr>
        <td><input type="button" value="4"  name="num" onClick="fn(4)"/></td>
        <td><input type="button" value="5"  name="num" onClick="fn(5)"/></td>
        <td><input type="button" value="6"  name="num" onClick="fn(6)"/></td>
        <td><input type="button" value="-" name="num" class="op"  onClick="fn(7)"/></td>
    </tr>
    <tr>
        <td><input type="button" value="1"  name="num" onClick="fn(8)"/></td>
        <td><input type="button" value="2"  name="num" onClick="fn(9)"/></td>
        <td><input type="button" value="3"  name="num" onClick="fn(10)"/></td>
        <td><input type="button" value="*" name="num" class="op" onClick="fn(11)"/></td>
    </tr>
    <tr>
        <td><input type="button" value="0"  name="num" onClick="fn(12)"/></td>
        <td><input type="button" value="." name="num" onClick="fn(13)"/></td>
        <td><input type="button" value="="  onClick="calculate()"/></td>
        <td><input type="button" value="/" name="num" class="op" onClick="fn(14)"/></td>
    </tr>
</table>

</body>
</html>